<template>
    <div class="hot-author" v-loading="loading">
        <div class="flex flex-between public-exchange">
            <h3>热门作者</h3>
            <span @click="changeBatch(total)">换一批</span>
        </div>
        <div class="hota-content flex" v-for="(taitem, index) in list" :key="index">
            <nuxt-link :to="taitem.isExpert ? `/community/expert/detail/${taitem.userId}` : `/community/article/detail/${taitem.userId}/expertinfo`" class="hota-l public-cursor">
                <img :src="coverImgUrl + taitem.fileShowUrl + `?x-oss-process=image/resize,w_${56}`" alt="">
            </nuxt-link>
            <div class="hota-r">
                <nuxt-link :to="taitem.isExpert ? `/community/expert/detail/${taitem.userId}` : `/community/article/detail/${taitem.userId}/expertinfo`">{{taitem.userName}}</nuxt-link>
                <div class="clearfix">
                    <span class="fl">{{taitem.newsNum}}篇文章</span>
                    <span class="fr" v-if="taitem.browseNum !== ''">{{taitem.browseNum}}次阅读</span>
                </div>
            </div>
        </div>
        <div v-if="list && list.length === 0" class="f-no-data">
            <i class="i-no-data icon icon-no-data"></i>
            <p>暂无数据</p>
        </div>
    </div>
</template>

<script lang="ts">
import {
    Vue,
    Component
} from 'nuxt-property-decorator'
import {hotAuteurApi} from '~/api/community/article/index'
@Component({
    name: 'hotAuthor',
    components: {}
})
export default class PageHotAuthort extends Vue {
    loading: boolean = false
    coverImgUrl: string = this.$store.state.basefile
    params: any = {
        pageNumber: 1,
        pageSize: 5
    }
    total: number = 0
    list: any = []
    changeBatch (total: any) {
        if (this.params.pageNumber < Math.ceil(total / this.params.pageSize)) {
            this.params.pageNumber += 1
            this.hotAuthorFn()
        } else {
            this.params.pageNumber = 1
            this.hotAuthorFn()
        }
    }
    async hotAuthorFn () {
        this.loading = true
        const {data}: any = await hotAuteurApi(this.params)
        if (data.code >= 0) {
            this.loading = false
            this.list = data.data.content
            this.total = data.data.totalElements
        }
    }
    mounted () {
        this.hotAuthorFn()
    }
}
</script>

<style lang="scss" scoped>
    .hot-author{
        margin: 30px 0 50px 0;
        padding: 20px;
        background: #fff;
    }
.hota-content{
    padding: 10px 0;
    .hota-l{
        img{
            display: block;
            width: 56px;
            height: 56px;
            border-radius: 50%;
        }
    }

    .hota-r{
        flex: 1;
        margin-left: 15px;
        font-size: 14px;
        a{
            display: block;
            color: #333;
            padding-bottom: 10px;
            &:hover{
                color: #11a9e8;
            }
        }
        div{
            span{
                color: #999;
            }
            .fl{
                float: left;
            }
            .fr{
                float: right;
            }
        }
    }
}
</style>
